<template>
  <a-card :bordered="false" :body-style="{ padding: 0 }">
    <a-calendar v-model:value="caValue" :fullscreen="true" @panelChange="onPanelChange" @select="onSelect">
      <template #headerRender="{ value: current, onChange, onTypeChange }">
        <div style="padding: 10px">
          <div style="margin-bottom: 10px">日历</div>
          <a-row type="flex" justify="center">
            <a-col>
              <a-auto-complete v-model:value="customerForm.customer_val" :options="customerOptions" placeholder="客户名称"
              style="width: 200px"
                @select="customer_onSelect" @search="customer_onSearch" @blur="customer_blur" allow-clear />
            </a-col>
            <a-col >
              <a-button type="primary" @click="() => calendarBillNumFn()">查询</a-button>
            </a-col>
          </a-row>
          <a-row type="flex" justify="end">
            <a-col>
              <a-select size="small" :dropdown-match-select-width="false" class="my-year-select"
                :value="String(current.year())" @change="newYear => {
                  onChange(current.year(+newYear));
                }
                  ">
                <a-select-option v-for="val in getYears(current)" :key="String(val)" class="year-item">
                  {{ val }}
                </a-select-option>
              </a-select>
            </a-col>
            <a-col>
              <a-select size="small" :dropdown-match-select-width="false" :value="String(current.month())" @change="selectedMonth => {
                onChange(current.month(parseInt(String(selectedMonth), 10)));
              }
                ">
                <a-select-option v-for="(val, index) in getMonths(current)" :key="String(index)" class="month-item">
                  {{ val }}
                </a-select-option>
              </a-select>
            </a-col>
          </a-row>
        </div>
      </template>
      <template #dateCellRender="{ current }">
        <div class="nums">{{ getListData(current) }}</div>
        <!-- <ul class="events">
          <li v-for="(item, index) in getListData(current)" :key="index">
            {{ item.content }}
          </li>
        </ul> -->
      </template>
    </a-calendar>
  </a-card>
</template>

<script setup>
import { ref, reactive,watch } from 'vue';
import { message } from 'ant-design-vue/es';
import { calendarBillNum } from '@/api/order/dashBoard';
import { listCustomersSel } from '@/api/order/customer';

import dayjs from 'dayjs';

import { TIME_OUT } from '@/config/damon';

//防止重复刷新
//客户下拉列表
let customer_m_timeout = 0
const customerOptions = ref([]);
let customerForm = reactive({
  customer_val: '',
  customer: '',
  customerId: '',
})
const customer_onSearch = searchText => {
  clearTimeout(customer_m_timeout)
  customer_m_timeout = setTimeout(() => {
    listCustomersSel({ 'name': searchText, type: '货代' }).then(msg => {
      customerOptions.value = msg
    }).catch((e) => {
    })
  }, 400);
};
const customer_onSelect = (value2, option2) => {
  // let a = customerOptions.value.find((item)=> {return item.value=value})
  customerForm.customer_val = option2.label
  customerForm.customer = option2.label
  customerForm.customerId = option2.value
};

const customer_blur = () => {
  customerForm.customer = customerForm.customer_val
  // customerForm.customer_val = customerForm.customer
};

watch([() => customerForm.customer_val], (val) => {
  customerForm.customer = customerForm.customer_val
}
)

const caValue = ref(dayjs());
const selectedValue = ref(dayjs());
const onSelect = value => {
  caValue.value = value;
  selectedValue.value = value;
  // console.log('onSelect', value,dayjs(caValue.value).format('YYYY-MM-DD'), dayjs(selectedValue.value).format('YYYY-MM-DD'));
};
const onPanelChange = value => {
  // console.log('onPanelChange', value,dayjs(caValue.value).format('YYYY-MM-DD'), dayjs(selectedValue.value).format('YYYY-MM-DD'));   
  caValue.value = value;
};

const getMonths = value => {
  // console.log(dayjs(caValue.value).format('YYYY-MM-DD'), dayjs(value).format('YYYY-MM-DD'));
  const localeData = value.localeData();
  const months = [];
  for (let i = 0; i < 12; i++) {
    months.push(localeData.monthsShort(value.month(i)));
  }
  return months;
};

// document.addEventListener('mouseup', function () {
//   caValue.value = dayjs('2017-02-25');
//   alert("sometext");
// })
const getYears = value => {
  const year = value.year();
  const years = [];
  for (let i = year - 10; i < year + 10; i += 1) {
    years.push(i);
  }
  return years;
};
let customer = ref('')
let listData = [];

function calendarBillNumFn() {
  calendarBillNum({
    customer: customerForm.customer,
    date1: dayjs(caValue.value).startOf('month').format('YYYY-MM-DD') + ' 00:00',
    date2: dayjs(caValue.value).endOf('month').format('YYYY-MM-DD') + ' 23:59'
  }).then(msg => {
    listData = msg
    let aa = caValue.value
    caValue.value = dayjs('1999-02-25')
    caValue.value = aa
  }).catch((e) => {
  })
}
let where_timeout = 0
watch([() => customerForm], (val) => {
  clearTimeout(where_timeout)
  where_timeout = setTimeout(() => {
    calendarBillNumFn()
  }, TIME_OUT);
},
{ deep: true, immediate: true }
)
watch([() => caValue.value], (val) => {
  if('1999-02-25'==dayjs(val).format('YYYY-MM-DD')) return false
  clearTimeout(where_timeout)
  where_timeout = setTimeout(() => {
    calendarBillNumFn()
  }, TIME_OUT);
}
)
const getListData = value => {
  let retData = '';
  let valueDate = dayjs(value).format('YYYY-MM')
  if (valueDate != dayjs(caValue.value).format('YYYY-MM')) {
    return ''
  }
  for (let i = 0; i < listData.length; i++) {
    let nums = listData[i]
    let fp = parseInt(nums.factoryPackDate)
    if (value.date() == fp) {
      // retData.push({
      //   type: 'warning',
      //   content: nums.num,
      // })
      return nums.num
    }
  }
  // return 0
  // console.log('return', dayjs(value).format('YYYY-MM-DD'), retData);
  // return retData || [];
};

</script>

<style lang="less" scoped>
.nums {
  display: flex;
  justify-content: center;
  align-items: center;

  height: 100%;
  font-size: 32px;
  color: #ef5b9c;
}
</style>
